<template>
  <el-card>
    <template #header>
      <div>工作日历</div>
    </template>
    <el-select v-model="year" @change="changeEvent">
      <el-option v-for="item in list" :key="item" :label="item" :value="item" />
    </el-select>
    <el-select v-model="month" @change="changeEvent">
      <el-option
        v-for="item in monthList"
        :key="item"
        :label="item"
        :value="item"
      />
    </el-select>
    <el-calendar v-model="value">
      <template #dateCell="{ date, data }">
        <div style="width: 100%; height: 100%" @click="cellClick(date)">
          <span>{{ date.getDate() }}</span>
          <!-- 当前月显示 -->
          <span v-if="data.type === 'current-month'">
            {{ date | formatDate }}
          </span>
        </div>
      </template>
    </el-calendar>
  </el-card>
</template>
<script>
export default {
  name: '',
  filters: {
    // 给日历组件周末添加字符:'休'
    formatDate(time) {
      if (time.getDay() === 6 || time.getDay() === 0) {
        return '休'
      } else {
        return ''
      }
    }
  },
  model: {
    prop: 'tiemValue'
  },
  props: {
    tiemValue: {
      type: Date,
      default: () => {
        return new Date()
      }
    }
  },
  data() {
    return {
      value: new Date(),
      list: [],
      year: '',
      monthList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      month: ''
    }
  },
  watch: {
    tiemValue: {
      handler(newVal) {
        console.log(newVal)
        this.year = newVal.getFullYear()
        this.month = newVal.getMonth() + 1
        this.value = newVal
        const min = this.year - 5
        const max = this.year + 5
        const arr = []
        for (let i = min; i <= max; i++) {
          arr.push(i)
        }
        this.list = arr
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    changeEvent() {
      this.$emit('input', new Date(this.year + '-' + this.month + '-01'))
    },
    cellClick(date) {
      console.log(11)
      this.$emit('input', date)
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-calendar__header {
  display: none !important;
}
</style>
